<script lang="ts" setup>
import { ref, getCurrentInstance, watch } from "vue";
interface DateFilter {
  min?: string;
  max?: string;
}
export interface DatePickerProps {
  date?: DateFilter;
}
defineProps<DateFilter>();
const internalInstance = getCurrentInstance();
const shortcuts =
  internalInstance.appContext.config.globalProperties.$pickerOptions.shortcuts;

const emits = defineEmits(["update:date"]);
const timeValue = ref<[Date, Date]>();
watch(timeValue, newVal => {
  const timeValu = newVal;
  if (timeValu) {
    emits("update:date", {
      min: timeValu[0]?.toLocaleDateString(),
      max: timeValu[1]?.toLocaleDateString()
    });
  } else {
    emits("update:date", {
      min: null,
      max: null
    });
  }
});
</script>
<template>
  <el-date-picker
    v-model="timeValue"
    type="daterange"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    :shortcuts="shortcuts"
  />
</template>
